<html><!-- Copyright (C) 2007 Laurent A.V. Szyster - Copylef GPL 2.0 -->
<head>
  <title>protocols.js > CSS</title>
  <link href="site.css" type="text/css" rel="stylesheet"></link>
  <link href="protocols.css" type="text/css" rel="stylesheet"></link>
</head>

<body>

<div>  
  <h1><a href="index.html">protocols.js</a></h1>
  <div class="menu">
    <a href="documentation.html">Documentation</a> &gt;
    <a href="functions.html">Functions</a>
    <a href="HTTP.html">HTTP</a>
    <a href="HTML.html">HTML</a>
    <a href="JSON.html">JSON</a>
  </div>
  <h2>Cascading Style Sheets (CSS)</h2>
  <ol>
    <li><a href="#CSS.select">select (selector)</a></li>
    <li><a href="#CSS.set">set (element, classes)</a></li>
    <li><a href="#CSS.add">add (element, classes)</a></li>
    <li><a href="#CSS.remove">remove (element, classes)</a></li>
    <li><a href="#CSS.getStyle">getStyle (element, name)</a></li>
  </ol>
  <h3>Synopsis</h3>
  <p>
    This part of the library decouples the control of a web user
    interface from its visual presentation, leveraging HTML and CSS 
    with as little JavaScript as possible.
  </p>
  <p>
    With <code>protocols.js</code> applications may get styles from
    elements by name, but there is no API provided to set them.
    So the only way to change the presentation of a page - other than 
    updating the HTML source - is to set, add or remove <a 
    href="http://en.wikipedia.org/wiki/CSS"
    >CSS</a> classes.
    The rationale is that getting named <em>computed</em> styles makes 
    sense (to get the font weight of an element for instance or its size), 
    but setting them from JavaScript is a recipe for an unmaintainable 
    presentation logic that thighly couples the user interface function 
    with its browser-specific view. 
  </p>
  <p>
    It is preferrable leave the last degree of freedom in presentation to 
    the style sheets and the host page writer. Good user interfaces are 
    difficult enough to code, there are more hackers than painters in that 
    business and supporting every browser incompatibilities is best done 
    with different HTML and CSS sources. Eventually each browser specific
    branches may be written by different persons with better taste and skills 
    for that part of the job.
  </p>
  <h3><a name="CSS.select" href="#">CSS.select (selector, element)</a></h3>
  <p>
    What programmers and designers apply best from CSS in JavaScript are 
    <a 
    href="http://www.w3.org/TR/css3-selectors/"
    >selectors</a>.
  </p>
  <pre 
    class="synopsis" 
    onclick="HTML.update($('css_select_test'), JSON.encode(eval_synopsis(this)));" 
    >map(function(el){return el.name;}, CSS.select('h3 a'));</pre>
  <div id="css_select_test" class="test">
    ...
  </div>
  <p>
    Thanks to Jack Soclum's
    <a 
    href="http://www.jackslocum.com/blog/2007/01/11/domquery-css-selector-basic-xpath-implementation-with-benchmarks/"
    >DOMQuery</a> (which makes the most of <code>CSS</code> sources), this
    library includes first class support for CSS selectors completed by
    XPATH expressions.
    I renamed its singleton <code>CSS</code>, removed dependencies on 
    <a href="http://www.extjs.com/">Ext</a> - reimplementing 
    <code>CSS.getStyle</code> - and added conveniences to set, add or remove 
    classes from an element.
  </p>
  <h3><a name="CSS.set" href="#">CSS.set (element, names)</a></h3>
  <style>
    .fitwidth {width: 100%}
  </style>
  <pre class="synopsis" onclick="eval_synopsis(this);" 
    >CSS.set ($('CSS_set_foobar'), ['fitwidth']);</pre>
  <div class="test">
    <textarea id="CSS_set_foobar"
      >A &lt;textarea&gt; to resize.</textarea>
  </div>
  <h3><a name="CSS.add" href="#">CSS.add (element, names)</a></h3>
  <pre class="synopsis" onclick="eval_synopsis(this);"
    >CSS.add ($('CSS_add_foobar'), ['hidden']);</pre>
  <div id="CSS_add_foobar" class="test">
    A paragraph to hide.
  </div>
  <h3><a name="CSS.remove" href="#">CSS.remove (element, names)</a></h3>
  <pre class="synopsis" onclick="eval_synopsis(this);"
    >CSS.remove ($('CSS_remove_foobar'), ['hidden']);</pre>
  <div id="CSS_remove_foobar" class="test hidden">
    A previously hidden paragraph.
  </div>
  <h3><a name="CSS.getStyle" href="#">CSS.getStyle (element, name)</a></h3>
  <p>
    ...
  </p>
</div>
<script src="protocols.js" type="text/javascript"></script>
<script src="tests.js" type="text/javascript"></script>
</body>
</html>